<template>
  <!-- 头部2 -->
  <div class="header2">
    <!-- 头部容器 -->
    <div class="headerWrp">
      <!-- 更多按钮，屏幕宽度小于1009时显示 -->
      <div class="moreBtn">
        <!-- 更多图标，根据isShowMore的状态显示不同的图标 -->
        <!-- 点击时调用moreClick事件 -->
        <i
          :class="isShowMore ? 'iconfont icon-guanbi' : 'iconfont icon-caidan'"
          @click="moreClick"
        ></i>
      </div>
      <!-- 更多导航列表 -->
      <!-- 根据isShowMore显示 -->
      <nav class="moreNav" v-if="isShowMore">
        <!-- 个人中心按钮，根据nowNav显示不同的样式 -->
        <button :class="nowNav === 0 && 'select'" @click="setNav(0)">
          个人中心
        </button>
        <!-- 优质笔记按钮，根据nowNav显示不同的样式 -->
        <button :class="nowNav === 1 && 'select'" @click="setNav(1)">
          优质笔记
        </button>
      </nav>
      <!-- 导航栏 -->
      <nav class="nav">
        <!-- logo图 -->
        <img class="logo" src="@/images/logo.png" alt="logo" />
        <!-- 个人中心按钮，根据nowNav显示不同的样式 -->
        <button :class="nowNav === 0 && 'select'" @click="setNav(0)">
          个人中心
        </button>
        <!-- 优质笔记按钮，根据nowNav显示不同的样式 -->
        <button :class="nowNav === 1 && 'select'" @click="setNav(1)">
          优质笔记
        </button>
      </nav>
      <!-- 搜索框 -->
      <div class="search">
        <!-- 输入框 -->
        <!-- 双向数据绑定searchVal -->
        <!-- 按回车键调用onSearch事件 -->
        <input
          v-model="searchVal"
          type="text"
          class="searchInput"
          placeholder="英语四级"
          @keydown.enter="onSearch"
          ref="search"
        />
        <!-- 搜索图标，点击时调用onSearch事件 -->
        <i class="iconfont icon-sousuowenjian" @click="onSearch"></i>
      </div>
      <!-- 消息和头像 -->
      <div class="messageAndProfile">
        <!-- 消息按钮 -->
        <div>
          <i class="iconfont icon-tongzhi" @click="changeNotify"></i>
          <!-- 消息通知 -->
          <Notify />
        </div>
        <!-- 头像 -->
        <!-- 点击时调用ProfileMoreClick -->
        <img
          :src="this.userData.avatar"
          alt="Profile"
          class="Profile"
          @click="ProfileMoreClick"
        />
      </div>
      <!-- 头像列表 -->
      <!-- 根据isShowProfileMore显示 -->
      <ul class="ProfileMore" v-if="isShowProfileMore">
        <!-- 循环遍历头像列表数据 -->
        <!-- 点击时调用ProfileListClick方法，传递id -->
        <li
          v-for="item of profileListData"
          :key="item.id"
          @click="ProfileListClick(item.id)"
        >
          <i :class="item.class"></i>
          {{ item.name }}
        </li>
        <!-- 分割线 -->
        <p></p>
        <!-- 循环遍历头像列表数据 -->
        <!-- 点击时调用ProfileListClick方法，传递id -->
        <li
          v-for="item of profileListData1"
          :key="item.id"
          @click="ProfileListClick(item.id)"
        >
          <i :class="item.class"></i>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- 头部与内容区间距 -->
    <!-- <div class="spacing"></div> -->
  </div>
</template>

<script>
import Notify from "@/components/global/Header2/notifyCps";
export default {
  name: "header2",
  components: {
    Notify,
  },
  data() {
    return {
      // 当前选择的导航页
      nowNav: 0,
      // 搜索文本
      searchVal: "",
      // 是否显示更多列表
      isShowMore: false,
      // 是否显示头像列表
      isShowProfileMore: false,
      // 头像列表数据
      profileListData: require("@/assets/json/profileList.json"),
      profileListData1: require("@/assets/json/profileList1.json"),
    };
  },
  props:["userData"],
  created() {
    // document点击事件
    document.addEventListener("click", (e) => {
      // 头像列表
      const ProfileMore = document.querySelector(".ProfileMore");
      // 头像
      const Profile = document.querySelector(".Profile");
      // 如果ProfileMore不为null
      if (ProfileMore != null) {
        // 如果点击的不是ProfileMore和Profile元素
        if (!ProfileMore.contains(e.target) && !Profile.contains(e.target)) {
          // 隐藏头像列表
          this.isShowProfileMore = false;
        }
      }

      // 消息通知
      const notify = document.getElementById("notify");
      // 头像
      const tongzhi = document.querySelector(".icon-tongzhi");
      // 如果notify不为null
      if (notify != null) {
        // 如果点击的不是notify和tongzhi元素
        if (!notify.contains(e.target) && !tongzhi.contains(e.target)) {
          // 隐藏消息通知
          notify.style.height = "";
        }
      }
    });
  },
  mounted(){

  },
  methods: {
    // 导航，0为个人中心，1为优质笔记
    setNav(index) {
      // 如果当前登录模式不为index
      if (this.nowNav !== index) {
        // 切换当前选择的导航页
        this.nowNav = index;
        // 0表示用户主页，1表示优质笔记页
        if (this.nowNav === 0) {
          // this.$router.push("/user");
        } else {
          // this.$router.push("/notelibrary");
        }
        // 隐藏更多列表
        this.isShowMore = false;
      }
    },
    // 搜索
    onSearch() {
      console.log(this.searchVal);
      // 失去焦点
      this.$refs.search.blur();
    },
    // 点击更多按钮后调用
    moreClick() {
      // 显示/隐藏更多列表
      this.isShowMore = !this.isShowMore;
    },
    // 点击头像时调用
    ProfileMoreClick() {
      // 显示/隐藏头像列表
      this.isShowProfileMore = !this.isShowProfileMore;
    },
    // 点击头像列表时调用
    ProfileListClick(id) {
      switch (id) {
        case 1:
          console.log("账号设置");
          this.$store.commit("setShowSetting",true);
          this.isShowProfileMore = false;
          break;
        case 2:
          console.log("升级会员");
          break;
        case 3:
          console.log("邀请有礼");
          break;
        case 4:
          console.log("学生福利");
          break;
        case 5:
          console.log("氢记官网");
          break;
        case 6:
          console.log("帮助中心");
          break;
        case 7:
          console.log("版本亮点");
          break;
        case 8:
          console.log("退出登录");
          // 清空token
          window.sessionStorage.clear();
          // 跳转到官网首页
          this.$router.push("/home");
          break;
      }
    },
    // 显示消息通知
    changeNotify() {
      const notify = document.getElementById("notify");
      // console.log(notify);
      if (notify.style.height === "") {
        notify.style.height = "200px";
      } else {
        notify.style.height = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 头部组件
.header2 {
  // 宽高
  width: 100%;
  height: 60px;
  // 背景颜色
  background-color: white;
  // 固定定位
  position: fixed;
  //   距顶部0px
  top: 0;
  //   层级
  z-index: 1;
  .headerWrp {
    //   宽高
    width: 1024px;
    height: 100%;
    // background-color: rosybrown;
    // 水平居中
    margin: 0 auto;
    // 弹性盒子
    display: flex;
    // justify-content: space-between;
    // 子元素垂直居中
    align-items: center;
    // 相对定位
    position: relative;
    // 更多按钮
    .moreBtn {
      // 隐藏
      display: none;
      //   绝对定位
      position: absolute;
      //   距左边20px
      left: 20px;
      // 菜单图标
      .icon-caidan {
        // 图标大小
        font-size: 25px;
        // 粗体
        font-weight: bold;
        // 小手
        cursor: pointer;
      }
      // 关闭图标
      .icon-guanbi {
        // 图标大小
        font-size: 16px;
        // 粗体
        font-weight: bold;
        // 小手
        cursor: pointer;
        // 左外边距
        margin-left: 5px;
      }
    }
    // 更多列表
    .moreNav {
      // 宽
      width: 100px;
      // 内边距
      padding: 5px 0;
      // height: 400px;
      // 背景颜色
      background-color: #fff;
      //   绝对定位
      position: absolute;
      //   距左边50px
      left: 50px;
      //   距上边20px
      top: 20px;
      //   圆角
      border-radius: 3px;
      //   阴影
      box-shadow: 0 0 10px #cccccc;
      //   字体大小
      font-size: 14px;
      //   层级
      z-index: 1;
      //   列表项
      button {
        //   背景颜色
        background-color: transparent;
        // 宽
        width: 100%;
        // 内边距
        padding: 5px;
        // 小手
        cursor: pointer;
        // 背景颜色
        color: #3c3c3c;
        // 鼠标移入时效果
        &:hover {
          // 背景颜色
          background-color: #e3f4fd;
          //   字体颜色
          color: #0182c7;
        }
      }
      //   当选中列表项时
      .select {
        //   背景颜色
        background-color: #e3f4fd;
        // 字体颜色
        color: #0182c7;
      }
    }
    // 导航栏
    .nav {
      // 绝对定位
      position: absolute;
      //   距左边0px
      left: 0;
      //   高
      height: 100%;
      //   弹性盒
      display: flex;
      //   垂直居中
      align-items: center;
      .logo {
        // 宽高
        width: 35px;
        height: 35px;
        // 右外边距20px
        margin-right: 20px;
        // background-image: url("../images/logo.png");
      }
      // 标签按钮
      button {
        // 高
        height: 100%;
        // 字体大小
        font-size: 14px;
        // font-weight: bold;
        // 背景颜色
        background-color: transparent;
        // 内边距
        // padding: 5px 0;
        // 右外边距
        margin-right: 20px;
        // 小手
        cursor: pointer;
        // 字体颜色
        color: #3c3c3c;
        // 宽高为内容区大小
        // box-sizing: content-box;
        border-bottom: 3px solid #fff;
      }
      // 选中时的样式
      .select {
        // 粗体
        font-weight: bold;
        // 字体颜色
        color: #0182c7;
        // 底部边框
        border-bottom: 3px solid #0182c7;
      }
    }
    // 搜索框
    .search {
      // 宽高
      width: 300px;
      height: 60%;
      //   背景颜色
      background-color: #e3f4fd;
      //   绝对圆角
      border-radius: 999px;
      //   绝对定位
      position: absolute;
      //   水平垂直居中
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      //   弹性盒
      display: flex;
      //   空白位于子元素之间
      justify-content: space-between;
      // 子元素垂直居中
      align-items: center;
      //   搜索输入框
      .searchInput {
        //   宽高
        width: 85%;
        height: 100%;
        // 背景颜色
        background-color: transparent;
        // 内边距
        padding: 0 20px;
        // 字体大小
        font-size: 14px;
        // 字体颜色
        color: #3c3c3c;
        // 轮廓
        outline: none;
      }
      //   搜索图标
      .icon-sousuowenjian {
        //   字体大小
        font-size: 20px;
        // 字体颜色
        color: #0182c7;
        // 右外边距
        margin-right: 10px;
        // 小手
        cursor: pointer;
      }
    }
    // 消息和头像
    .messageAndProfile {
      // 绝对定位
      position: absolute;
      //   距右边0px
      right: 0;
      //   盒模型
      display: flex;
      //   子元素垂直居中
      align-items: center;
      // 消息图标
      .icon-tongzhi {
        //   字体大小
        font-size: 20px;
        // 字体颜色
        color: #3c3c3c;
        // 右外边距
        margin-right: 20px;
        // 小手
        cursor: pointer;
        &:hover{
          color: #0182c7;
        }
      }
      //   头像
      img {
        //   宽高
        width: 40px;
        height: 40px;
        // 圆角
        border-radius: 50%;
        // 小手
        cursor: pointer;
      }
    }
    // 头像列表
    .ProfileMore {
      // 宽
      width: 100px;
      //   内边距
      padding: 5px 0;
      // height: 400px;
      //   背景颜色
      background-color: #fff;
      //   绝对定位
      position: absolute;
      //   距右边50px
      right: 50px;
      //   距上边20px
      top: 20px;
      //   圆角
      border-radius: 3px;
      //   阴影
      box-shadow: 0 0 10px #cccccc;
      //   字体大小
      font-size: 14px;
      //   分割线
      p {
        //   宽
        width: 80px;
        // 上边框
        border-top: #cccccc solid 1px;
        // border-right: #0182c7 solid 50px;
        // 外边距
        margin: 10px auto;
      }
      //   列表项
      li {
        //   宽
        width: 100%;
        // 内边距
        padding: 5px;
        // 小手
        cursor: pointer;
        // 字体颜色
        color: #3c3c3c;
        // 弹性盒
        display: flex;
        // 子元素水平垂直居中
        justify-content: center;
        align-items: center;
        // 图标
        .iconfont {
          // 图标大小
          font-size: 16px;
          //   右外边距
          margin-right: 3px;
        }
        // 鼠标移入时
        &:hover {
          // 背景颜色
          background-color: #e3f4fd;
          //   字体颜色
          color: #0182c7;
        }
      }
    }
  }
  //   .spacing{
  //       width: 100%;
  //       height: 10px;
  //       background-color: rgb(102, 170, 207);
  //   }
}
// 当窗口小于1024px时
@media (max-width: 1024px) {
  .header2 {
    //   头部容器
    .headerWrp {
      // 宽度
      width: 100%;
      //   导航条
      .nav {
        //   距左边
        left: 20px;
      }
      //   搜索框
      .search {
        width: 30%;
      }
      //   消息和头像
      .messageAndProfile {
        right: 20px;
      }
      //   头像列表
      .ProfileMore {
        right: 70px;
      }
    }
  }
}
// 当窗口宽度小于768时
@media (max-width: 768px) {
  .header2 {
    .headerWrp {
      // 隐藏导航条
      .nav {
        display: none;
      }
      //   更多按钮
      .moreBtn {
        //   显示
        display: block;
      }
    }
  }
}
</style>